{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros.html" import fxa_email_form with context %}

{% extends "base-protocol-mozilla.html" %}

{% set _entrypoint = 'mozilla.org-firefox-accounts' %}
{% set referrals = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=account' %}

{% block page_title %}{{ ftl('mozilla-accounts-get-a-mozilla-account') }}{% endblock %}

{% block page_desc %}{{ ftl('mozilla-accounts-securely-sync-your') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-emphasis-box') }}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('mozilla_account') }}
{% endblock %}

{% block body_class %}firefox-accounts mzp-t-firefox state-fxa-default{% endblock %}

{% block site_header %}
  {% include 'includes/protocol/navigation/navigation.html' %}
{% endblock %}

{% block content %}
<section class="mzp-c-split mzp-t-content-xl">
  <div class="mzp-c-split-container">
    <div class="mzp-c-split-media">
      <div class="mzp-c-emphasis-box l-accounts">
        <div class="c-accounts-form">
          {{ fxa_email_form(
            entrypoint=_entrypoint,
            form_title=ftl('firefox-accounts-sign-in'),
            intro_text=ftl('firefox-accounts-enter-your-email-address'),
            button_class='mzp-c-button mzp-t-primary mzp-t-product')
          }}

          <p class="fxa-signin">
            {{ ftl('firefox-accounts-already-have-an-account') }}
            {{ fxa_button(
              entrypoint=_entrypoint,
              button_text=ftl('firefox-accounts-sign-in'),
              action='signin',
              is_button_class=False,
              optional_attributes={'data-cta-text': 'Sign In', 'data-cta-type': 'fxa-sync', 'data-cta-position': 'primary'}
            ) }}
          </p>
        </div>

        <div class="c-manage">
          <p>{{ ftl('mozilla-accounts-already') }}</p>
          <a href="https://accounts.firefox.com/settings" id="manage" data-testid="manage-account-link">{{ ftl('firefox-accounts-manage') }}</a>
        </div>
      </div>
    </div>
    <div class="mzp-c-split-body">
      <h1 class="accounts-header">{{ ftl('mozilla-account-header') }}</h1>
      <div class="accounts-products">
        <h2>{{ ftl('mozilla-account-sign-in-to') }}</h2>

        <a href="https://www.firefox.com/"><h4 class="mzp-c-wordmark mzp-t-wordmark-sm mzp-t-product-firefox">{{ ftl('firefox-accounts-firefox-browser') }}</h4></a>
        <ul class="mzp-u-list-styled">
          {% if ftl_has_messages('firefox-accounts-send-a-tab', 'firefox-accounts-save-and-sync') %}

          <li>{{ ftl('firefox-accounts-send-a-tab', send='https://blog.mozilla.org/en/products/firefox/firefox-tips/firefox-secret-tips/#send-tabs') }}</li>
          <li>{{ ftl('firefox-accounts-save-and-sync', password=url('firefox.features.password-manager')) }}</li>

          {% else %}
          <li>{{ ftl('firefox-accounts-keep-your-passwords') }}</li>
          {% endif %}
        </ul>

        <a href="https://monitor.mozilla.org/{{ referrals }}" rel="external noopener"><h4 class="mzp-c-wordmark mzp-t-wordmark-sm t-product-mozilla-monitor">{{ ftl('firefox-accounts-mozilla-monitor') }}</h4></a>
        <ul class="mzp-u-list-styled">
          <li>{% if LANG == 'en-US' %}Get automated removal of your exposed info from sites that are selling it{% else %}{{ ftl('firefox-accounts-get-email-alerts') }}{% endif %}</li>
        </ul>

        <a href="https://relay.firefox.com/{{ referrals }}" rel="external noopener"><h4 class="mzp-c-wordmark mzp-t-wordmark-sm mzp-t-product-relay">{{ ftl('firefox-accounts-firefox-relay') }}</h4></a>
        <ul class="mzp-u-list-styled">
          <li>{{ ftl('firefox-accounts-protect-your-identity') }}</li>
        </ul>

        <a href="{{ url('products.vpn.landing') }}"><h4 class="mzp-c-wordmark mzp-t-wordmark-sm mzp-t-product-vpn">{{ ftl('firefox-accounts-mozilla-vpn') }}</h4></a>
        <ul class="mzp-u-list-styled">
          {% if ftl_has_messages('firefox-accounts-encrypt-your', 'firefox-accounts-we-never') %}
            <li>{{ ftl('firefox-accounts-encrypt-your') }}</li>
            <li>{{ ftl('firefox-accounts-we-never') }}</li>
          {% else %}
            <li>{{ ftl('firefox-accounts-travel-the-internet') }}</li>
          {% endif %}
        </ul>
        <ul class="mzp-u-list-styled">
          <li>{{ ftl('firefox-accounts-save-articles') }}</li>
          <li>{{ ftl('firefox-accounts-read-in-a') }}</li>
        </ul>
      </div>

      <p class="c-accounts-tagline">{{ ftl('firefox-accounts-get-it-all-on-every') }}</p>

    </div>
    </div>

</section>

{% endblock %}

{% block js %}
  {{ js_bundle('mozilla_account') }}
{% endblock %}
